<template>
    <template v-if="hasChild(route)">
        <el-menu-item v-if="route.meta && !route.meta.hidden" :index="route.path" @click="$router.push(baseUrl)">
            <Item :icon="route.meta.icon" :title="route.meta.title" />
        </el-menu-item>    
    </template>

    <el-sub-menu v-else :index="route.path">
        <template #title>
            <Item v-if="route.meta" :icon="route.meta.icon" :title="route.meta.title" />
        </template>
        <SidebarItem 
            v-for="child in route.children"
            :route="child"
            :baseUrl="route.path + '/' + child.path"
            :key="child.name" 
        />
    </el-sub-menu>
</template>

<script setup lang='ts'>

import { RouteRecordRaw } from 'vue-router'
import Item from './Item.vue'
type Props = {
    route: RouteRecordRaw,
    baseUrl: string
}

defineProps<Props>()

// 初始化菜单列表
const hasChild = (route:RouteRecordRaw) => {
    if(route.children) {
        // 过滤不需要展示的路由
        const showingRoute = route.children.filter(item => {
            if(item.meta && item.meta.hidden) {
                return false 
            } else {
                return true
            }
        }) 
        if(showingRoute.length === 1) {
            return true
        }
        if(showingRoute.length === 0) {
            return true
        }
        return false
    }
    return true
    
}
</script>
<style scoped>
</style>